<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考勤管理 - 教务管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background-color: #4285f4;
            color: white;
            padding: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }
        
        .nav-title {
            font-size: 24px;
            font-weight: bold;
        }
        
        .nav-menu {
            display: flex;
            list-style: none;
            gap: 30px;
        }
        
        .nav-menu a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .nav-menu a:hover, .nav-menu a.active {
            background-color: rgba(255,255,255,0.2);
        }
        
        .nav-user {
            color: #e3f2fd;
        }
        
        /* 主要内容区域 */
        .main-container {
            max-width: 1200px;
            margin: 20px auto;
            padding: 0 20px;
        }
        
        .page-header {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 28px;
            color: #333;
            margin-bottom: 10px;
        }
        
        .page-desc {
            color: #666;
            font-size: 16px;
        }
        
        /* 统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: rgba(255,255,255,0.95);
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-number {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-size: 16px;
        }
        
        .stat-present { color: #28a745; }
        .stat-absent { color: #dc3545; }
        .stat-leave { color: #ffc107; }
        .stat-late { color: #fd7e14; }
        
        /* 操作区域 */
        .action-bar {
            background: rgba(255,255,255,0.95);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }
        
        .form-group label {
            font-size: 14px;
            color: #333;
            font-weight: bold;
        }
        
        .form-input {
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            width: 150px;
        }
        
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #4285f4, #34a853);
            color: white;
            box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(66, 133, 244, 0.4);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #5a6268;
        }
        
        /* 数据表格 */
        .data-container {
            background: rgba(255,255,255,0.95);
            border-radius: 8px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .table-header {
            padding: 20px;
            border-bottom: 1px solid #eee;
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }
        
        .table-container {
            overflow-x: auto;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #eee;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
            color: #333;
        }
        
        tr:hover {
            background-color: #f5f5f5;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .status-present { background: #d4edda; color: #155724; }
        .status-absent { background: #f8d7da; color: #721c24; }
        .status-leave { background: #fff3cd; color: #856404; }
        .status-late { background: #ffeaa7; color: #6c5ce7; }
        
        .no-data {
            text-align: center;
            padding: 40px;
            color: #999;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-container {
                flex-direction: column;
                gap: 15px;
            }
            
            .nav-menu {
                gap: 15px;
            }
            
            .action-bar {
                flex-direction: column;
                align-items: stretch;
            }
            
            .form-input {
                width: 100%;
            }
            
            .stats-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="nav-container">
            <div class="nav-title">教务管理系统</div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="student.html">学生管理</a></li>
                <li><a href="attendance.html" class="active">考勤管理</a></li>
                <li><a href="user.html">用户管理</a></li>
            </ul>
            <div class="nav-user">admin ▼</div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-container">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">考勤管理</h1>
            <p class="page-desc">管理学生考勤记录，包括出勤、缺勤、请假、迟到等状态</p>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-container">
            <div class="stat-card">
                <div class="stat-number stat-present" id="presentCount">0</div>
                <div class="stat-label">出勤人数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number stat-absent" id="absentCount">0</div>
                <div class="stat-label">缺勤人数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number stat-leave" id="leaveCount">0</div>
                <div class="stat-label">请假人数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number stat-late" id="lateCount">0</div>
                <div class="stat-label">迟到人数</div>
            </div>
        </div>

        <!-- 操作栏 -->
        <div class="action-bar">
            <div class="form-group">
                <label>日期</label>
                <input type="date" id="dateInput" class="form-input" value="">
            </div>
            <div class="form-group">
                <label>班级</label>
                <select id="classSelect" class="form-input">
                    <option value="">全部班级</option>
                </select>
            </div>
            <div class="form-group">
                <label>状态</label>
                <select id="statusSelect" class="form-input">
                    <option value="">全部状态</option>
                    <option value="present">出勤</option>
                    <option value="absent">缺勤</option>
                    <option value="leave">请假</option>
                    <option value="late">迟到</option>
                </select>
            </div>
            <button class="btn btn-primary" onclick="searchAttendance()">查询</button>
            <button class="btn btn-secondary" onclick="resetSearch()">重置</button>
            <button class="btn btn-primary" onclick="markAttendance()">考勤打卡</button>
        </div>

        <!-- 数据表格 -->
        <div class="data-container">
            <div class="table-header">考勤记录</div>
            <div class="table-container">
                <table id="attendanceTable">
                    <thead>
                        <tr>
                            <th>日期</th>
                            <th>学号</th>
                            <th>姓名</th>
                            <th>班级</th>
                            <th>考勤状态</th>
                            <th>打卡时间</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="attendanceTableBody">
                    </tbody>
                </table>
                <div id="noDataDiv" class="no-data">暂无考勤数据</div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 设置默认日期为今天
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('dateInput').value = today;
            
            // 加载班级列表
            loadClasses();
            
            // 加载考勤数据
            loadAttendanceData();
        });
        
        // 加载班级列表
        async function loadClasses() {
            try {
                const response = await fetch('/api/classes/all');
                const result = await response.json();
                
                if (result.success && result.data) {
                    const classSelect = document.getElementById('classSelect');
                    result.data.forEach(cls => {
                        const option = document.createElement('option');
                        option.value = cls.id;
                        option.textContent = cls.className;
                        classSelect.appendChild(option);
                    });
                }
            } catch (error) {
                console.error('加载班级列表失败:', error);
            }
        }
        
        // 加载考勤数据（模拟数据）
        function loadAttendanceData() {
            // 模拟考勤数据
            const mockData = [
                { date: '2024-01-15', studentNo: '2024001', name: '张三', className: '计算机1班', status: 'present', checkTime: '08:30', note: '' },
                { date: '2024-01-15', studentNo: '2024002', name: '李四', className: '计算机1班', status: 'late', checkTime: '08:45', note: '迟到15分钟' },
                { date: '2024-01-15', studentNo: '2024003', name: '王五', className: '计算机2班', status: 'absent', checkTime: '', note: '无故缺勤' },
                { date: '2024-01-15', studentNo: '2024004', name: '赵六', className: '计算机2班', status: 'leave', checkTime: '', note: '病假' },
                { date: '2024-01-15', studentNo: '2024005', name: '钱七', className: '计算机1班', status: 'present', checkTime: '08:25', note: '' }
            ];
            
            displayAttendanceData(mockData);
            updateStats(mockData);
        }
        
        // 显示考勤数据
        function displayAttendanceData(data) {
            const tbody = document.getElementById('attendanceTableBody');
            const noDataDiv = document.getElementById('noDataDiv');
            
            if (data.length === 0) {
                tbody.innerHTML = '';
                noDataDiv.style.display = 'block';
                return;
            }
            
            noDataDiv.style.display = 'none';
            tbody.innerHTML = '';
            
            data.forEach(record => {
                const row = document.createElement('tr');
                const statusText = getStatusText(record.status);
                const statusClass = `status-${record.status}`;
                
                row.innerHTML = `
                    <td>${record.date}</td>
                    <td>${record.studentNo}</td>
                    <td>${record.name}</td>
                    <td>${record.className}</td>
                    <td><span class="status-badge ${statusClass}">${statusText}</span></td>
                    <td>${record.checkTime || '-'}</td>
                    <td>${record.note || '-'}</td>
                    <td>
                        <button class="btn btn-primary" style="padding: 5px 10px; margin-right: 5px;" onclick="editAttendance('${record.studentNo}')">编辑</button>
                    </td>
                `;
                tbody.appendChild(row);
            });
        }
        
        // 更新统计数据
        function updateStats(data) {
            const stats = {
                present: 0,
                absent: 0,
                leave: 0,
                late: 0
            };
            
            data.forEach(record => {
                if (stats.hasOwnProperty(record.status)) {
                    stats[record.status]++;
                }
            });
            
            document.getElementById('presentCount').textContent = stats.present;
            document.getElementById('absentCount').textContent = stats.absent;
            document.getElementById('leaveCount').textContent = stats.leave;
            document.getElementById('lateCount').textContent = stats.late;
        }
        
        // 获取状态文本
        function getStatusText(status) {
            const statusMap = {
                'present': '出勤',
                'absent': '缺勤',
                'leave': '请假',
                'late': '迟到'
            };
            return statusMap[status] || status;
        }
        
        // 搜索考勤记录
        function searchAttendance() {
            const date = document.getElementById('dateInput').value;
            const classId = document.getElementById('classSelect').value;
            const status = document.getElementById('statusSelect').value;
            
            console.log('搜索条件:', { date, classId, status });
            // 这里应该调用后端API进行搜索
            alert('搜索功能开发中...');
        }
        
        // 重置搜索
        function resetSearch() {
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('dateInput').value = today;
            document.getElementById('classSelect').value = '';
            document.getElementById('statusSelect').value = '';
            loadAttendanceData();
        }
        
        // 考勤打卡
        function markAttendance() {
            alert('考勤打卡功能开发中...');
        }
        
        // 编辑考勤记录
        function editAttendance(studentNo) {
            alert(`编辑考勤记录功能开发中... 学号: ${studentNo}`);
        }
    </script>
</body>
</html>
